<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <n-input
      v-model:value="inptStr"
      type="text"
      placeholder="抽卡记录输入断网刷新后的提示文本"
    />
    <n-button :loading="loading" @click="getFlvtbInfo" type="primary">
      {{ buttonText }}
    </n-button>
    <br />
    <n-gradient-text
      v-for="(item, index) in gachaRec"
      :key="index"
      :type="textColor[index % 4]"
      >{{ item.name }}[{{ item.value }}]</n-gradient-text
    >
    <div class="echarts-box">
      <div id="myEcharts" :style="{ width: '900px', height: '300px' }"></div>
    </div>

    <n-modal v-model:show="isModalShow">
      <n-card
        style="width: 600px"
        :title="DetailInfo.uname"
        :bordered="false"
        size="huge"
        role="dialog"
        aria-modal="true"
      >
        <template #cover>
          <img :src="DetailInfo.face" />
        </template>
        {{ DetailInfo.sign }}
      </n-card>
    </n-modal>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import { NInput, NButton, NCard, NModal, NGradientText } from "naive-ui";
import axios from "axios";
import * as echarts from "echarts";

export default defineComponent({
  name: "HelloWorld",
  props: {
    msg: String,
  },
  components: {
    NInput,
    NButton,
    NCard,
    NModal,
    NGradientText,
  },
  data() {
    return {
      inptStr: "",
      gachaList: [],
      isModalShow: false,
      DetailInfo: {},
      end_id: 0,
      times: 0,
      fourStar: 0,
      gachaCount: 0,
      gachaRec: [],
      textColor: ["info", "success", "warning", "error"],
      chatData: {
        series: [
          {
            data: [],
            type: "pie",
          },
        ], //配置项
      },
      loading: false,
      buttonText: "查询",
    };
  },
  methods: {
    logInptStr() {
      console.log(this.inptStr);
    },
    getFlvtbInfo() {
      this.gachaList = [];
      this.end_id = 0;
      this.times = 0;
      this.fourStar = 0;
      this.gachaCount = 0;
      this.gachaRec = [];
      this.loading = true;
      this.buttonText = "查询中";
      this.getdata();
    },
    getdata() {
      let dataStr = this.inptStr.split("?")[1];
      dataStr = dataStr.split("#")[0];

      let dataList = dataStr.split("&");
      for (let i = 0; i < dataList.length; i++) {
        dataList[i] = dataList[i].split("=")[1];
      }
      console.log(dataList);
      let localApi = "/apis/event/gacha_info/api/getGachaLog";
      // let onlineApi =
      //   "http://1.117.185.134/apis/event/gacha_info/api/getGachaLog";
      axios
        .get(localApi, {
          params: {
            authkey_ver: dataList[0],
            sign_type: dataList[1],
            auth_appid: dataList[2],
            init_type: dataList[3],
            gacha_id: dataList[4],
            timestamp: dataList[5],
            lang: dataList[6],
            device_type: dataList[7],
            ext: dataList[8],
            game_version: dataList[9],
            plat_type: dataList[10],
            region: dataList[11],
            authkey: unescape(dataList[12]),
            game_biz: dataList[13],
            gacha_type: 301,
            page: 1,
            size: 20,
            end_id: this.end_id,
          },
        })
        .then((response) => {
          let getData = response.data.data.list;
          for (let o of getData) {
            this.gachaList.push(o);
            if (Number(o.rank_type) >= 5) {
              this.fourStar++;
            }
          }
          this.times = this.times + 1;
          if (this.times > 30 || getData.length <= 0) {
            console.log("五星概率" + this.fourStar / this.gachaList.length);

            for (let i = this.gachaList.length - 1; i >= 0; i--) {
              this.gachaCount++;
              if (Number(this.gachaList[i].rank_type) >= 5) {
                this.gachaRec.push({
                  name: this.gachaList[i].name,
                  value: this.gachaCount,
                });
                this.gachaCount = 0;
              }
            }

            let name = [];
            let count = [];
            for (let rec of this.gachaRec) {
              name.push(rec.name);
              count.push(rec.value);
            }

            let echart = echarts;
            let chart = echart.init(document.getElementById("myEcharts"));
            this.chatData.series[0].data = this.gachaRec;
            chart.setOption(this.chatData);
            window.onresize = function () {
              //自适应大小, 不用的话不会自适应大小。
              chart.resize();
            };

            console.log(this.gachaRec);
            console.log(
              "平均几抽出货：" + this.gachaList.length / this.fourStar
            );
            console.log("一共几抽：" + this.gachaList.length);
            this.loading = false;
            this.buttonText = "查询";
            return;
          }
          console.log(response);
          console.log(this.times);
          this.end_id = getData[getData.length - 1].id;
          setTimeout(this.getdata, 150);
        })
        .catch(function (error) {
          // 请求失败处理
          console.log(error);
        });
    },
    showModal(info) {
      this.DetailInfo = info;
      console.log(info);
      this.isModalShow = true;
    },
  },
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
/* .my-card {
  max-width: 100px;
} */
</style>
